<template>
  <div>
    <div class="view-title">标签数据</div>
    <div class="select_box">
      <div>
        <el-select v-model="checkDays.label" @change="handleChange">
          <el-option
            v-for="item in activeOptions"
            :key="Number(item.value)"
            :label="item.label"
            :value="Number(item.value)"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div id="EChart" :style="{ width: '100%', height: '450px' }"></div>
  </div>
</template>
<script>
import { countUserTags } from "@/api/userManagement.js";
import echarts from "echarts";
require("echarts/theme/macarons");
export default {
  data() {
    return {
      chart: null,
      checkDays: {
        value: "7",
        label: "近7天",
      },
      activeOptions: [
        {
          value: "3",
          label: "近3天",
        },
        {
          value: "7",
          label: "近7天",
        },
        {
          value: "14",
          label: "近14天",
        },
        {
          value: "30",
          label: "近30天",
        },
      ],
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handle);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handle);
  },
  methods: {
    handle() {
      this.chart.resize();
    },
    handleChange(e) {
      this.checkDays.value = e;
      this.getServerData();
    },
    initChart() {
      this.chart = echarts.init(document.getElementById("EChart"));
      this.getServerData();
    },

    getServerData() {
      countUserTags({
        select_day: this.checkDays.value - 1,
      }).then((res) => {
        const activate_kf_time_list = [];
        const activate_page_time_list = [];
        const agent_page_time_list = [];
        const become_agent_time_list = [];
        const become_fxuser_page_time_list = [];
        const become_fxuser_time_list = [];
        const broadband_page_time_list = [];
        const fxuser_page_time_list = [];
        const goods_page_time_list = [];
        const package_kf_time_list = [];
        const package_page_time_list = [];
        const refund_apply_kf_time_list = [];
        const refund_apply_page_time_list = [];
        const smallshop_page_time_list = [];
        const app_register_count_list = [];
        const agent_h5_register_count_list = [];
        const dateList = [];
        for (let item in res.data.activate_kf_time) {
          dateList.push(item);
          activate_kf_time_list.push(res.data.activate_kf_time[item]);
        }
        for (let item in res.data.activate_page_time) {
          activate_page_time_list.push(res.data.activate_page_time[item]);
        }
        for (let item in res.data.agent_page_time) {
          agent_page_time_list.push(res.data.agent_page_time[item]);
        }
        for (let item in res.data.become_agent_time) {
          become_agent_time_list.push(res.data.become_agent_time[item]);
        }
        for (let item in res.data.become_fxuser_page_time) {
          become_fxuser_page_time_list.push(
            res.data.become_fxuser_page_time[item]
          );
        }
        for (let item in res.data.become_fxuser_time) {
          become_fxuser_time_list.push(res.data.become_fxuser_time[item]);
        }
        for (let item in res.data.broadband_page_time) {
          broadband_page_time_list.push(res.data.broadband_page_time[item]);
        }
        for (let item in res.data.fxuser_page_time) {
          fxuser_page_time_list.push(res.data.fxuser_page_time[item]);
        }
        for (let item in res.data.goods_page_time) {
          goods_page_time_list.push(res.data.goods_page_time[item]);
        }
        for (let item in res.data.package_kf_time) {
          package_kf_time_list.push(res.data.package_kf_time[item]);
        }
        for (let item in res.data.package_page_time) {
          package_page_time_list.push(res.data.package_page_time[item]);
        }
        for (let item in res.data.refund_apply_kf_time) {
          refund_apply_kf_time_list.push(res.data.refund_apply_kf_time[item]);
        }
        for (let item in res.data.refund_apply_page_time) {
          refund_apply_page_time_list.push(
            res.data.refund_apply_page_time[item]
          );
        }
        for (let item in res.data.smallshop_page_time) {
          smallshop_page_time_list.push(res.data.smallshop_page_time[item]);
        }
        for (let item in res.data.app_register_count) {
          app_register_count_list.push(res.data.app_register_count[item]);
        }
        for (let item in res.data.agent_h5_register_count) {
          agent_h5_register_count_list.push(
            res.data.agent_h5_register_count[item]
          );
        }
        // 配置参数
        let config = {
          dataZoom: [
            {
              // 设置滚动条的隐藏与显示
              show: true,
              // 设置滚动条类型
              type: "slider",
              // 设置背景颜色
              backgroundColor: "#eee",
              // 设置选中范围的填充颜色
              fillerColor: "#ccc",
              // 设置边框颜色
              // borderColor: "rgb(19, 63, 100)",
              // 是否显示detail，即拖拽时候显示详细数值信息
              showDetail: false,
              // 数据窗口范围的起始数值
              startValue: 0,
              // 数据窗口范围的结束数值（一页显示多少条数据）
              endValue: 8,
              // empty：当前数据窗口外的数据，被设置为空。
              // 即不会影响其他轴的数据范围
              filterMode: "empty",
              // 设置滚动条宽度，相对于盒子宽度
              width: "80%",
              // 设置滚动条高度
              height: 8,
              // 设置滚动条显示位置
              left: "center",
              // 是否锁定选择区域（或叫做数据窗口）的大小
              zoomLoxk: true,
              // 控制手柄的尺寸
              handleSize: 0,
              // dataZoom-slider组件离容器下侧的距离
              bottom: 3,
            },
            {
              // 没有下面这块的话，只能拖动滚动条，
              // 鼠标滚轮在区域内不能控制外部滚动条
              type: "inside",
              // 滚轮是否触发缩放
              zoomOnMouseWheel: false,
              // 鼠标滚轮触发滚动
              moveOnMouseMove: true,
              moveOnMouseWheel: true,
            },
          ],

          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [
              "app注册人数",
              "合伙人招募注册人数",
              "咨询激活客服",
              "咨询套餐客服",
              "咨询返费客服",
              "点击激活",
              "成为合伙人",
              "成为分销员",
              "浏览合伙人页面",
              "浏览招募分销员页面",
              "浏览宽带页面",
              "浏览分销员页面",
              "浏览商品页面",
              "浏览套餐页面",
              "浏览返费页面",
              "浏览小店页面",
            ],
            selected: {
              app注册人数: true,
              合伙人招募注册人数: false,
              咨询激活客服: false,
              咨询套餐客服: false,
              咨询返费客服: false,
              点击激活: false,
              成为合伙人: false,
              成为分销员: true,
              浏览合伙人页面: false,
              浏览招募分销员页面: false,
              浏览宽带页面: false,
              浏览分销员页面: false,
              浏览商品页面: false,
              浏览套餐页面: false,
              浏览返费页面: false,
              浏览小店页面: false,
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: dateList,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "app注册人数",
              type: "line",
              data: app_register_count_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "合伙人招募注册人数",
              type: "line",
              data: agent_h5_register_count_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "咨询激活客服",
              type: "line",
              data: activate_kf_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "咨询套餐客服",
              type: "line",
              data: package_kf_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "咨询返费客服",
              type: "line",
              data: refund_apply_kf_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "点击激活",
              type: "line",
              data: activate_page_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "成为合伙人",
              type: "line",
              data: become_agent_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "成为分销员",
              type: "line",
              data: become_fxuser_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "浏览合伙人页面",
              type: "line",
              data: agent_page_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "浏览招募分销员页面",
              type: "line",
              data: become_fxuser_page_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "浏览宽带页面",
              type: "line",
              data: broadband_page_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "浏览分销员页面",
              type: "line",
              data: fxuser_page_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "浏览商品页面",
              type: "line",
              data: goods_page_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "浏览套餐页面",
              type: "line",
              data: package_page_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "浏览返费页面",
              type: "line",
              data: refund_apply_page_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "浏览小店页面",
              type: "line",
              data: smallshop_page_time_list,
              smooth: true,
              label: {
                show: true,
                position: "top",
              },
            },
          ],
        };
        // 设置参数
        this.chart.setOption(config);
      });
    },
  },
};
</script>
<style scoped>
.charts-box {
  width: 100%;
  height: 500px;
}
.select_box {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 20px;
}
</style>
